<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="../css/date_input.css">
    <link rel="stylesheet" type="text/css" href="../css/common.css">
    <script src="../js/jquery-1.12.3.js"></script>
    <script src="../js/jquery.date_input.pack.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  </head>
  <body>
    <header>
      <a class="navbar-header" href="">
        <img src="../images/ph.png" alt="">
        <div>
          <span>Nifty</span>
        </div>
      </a>
    </header>
    <div class="boxed">
      <div class="menu-wrap">
        <ul>
          <li class="list-header">Navigation</li>
          <li class="active-link">
            <a href="#">
              <i class="ph"></i>
              <span>Dashboard</span>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="ph"></i>
              <span>Dashboard</span>
            </a>
            <li/>
              <li class="list-divider"></li>
              <li>
                <a href="#">
                  <i class="ph"></i>
                  <span>Dashboard</span>
                  <i class="down-list"></i>
                </a>
                <ul class="op-list">
                  <li>
                    <a href="#">Dashboard</a>
                  </li>
                  <li>
                    <a href="#">Dashboard</a>
                  </li>
                  <li>
                    <a href="#">Dashboard</a>
                  </li>
                  <li>
                    <a href="#">Dashboard</a>
                  </li>
                </ul>
              </li>
              <li class="list-header">Components</li>
              <li>
                <a href="#">
                  <i class="ph"></i>
                  <span>Dashboard</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="ph"></i>
                  <span>Dashboard</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="ph"></i>
                  <span>Dashboard</span>
                  <i class="down-list"></i>
                </a>
                <ul class="op-list">
                  <li>
                    <a href="#">Dashboard</a>
                  </li>
                  <li>
                    <a href="#">Dashboard</a>
                  </li>
                </ul>
              </li>
        </ul>
      </div>
      <!-- 内容区域 -->
      <div class="content-container">
        <div class="common-tit">
          <h2>课程数据</h2>
          <span>数据统计 > 课程数据</span>
          <!-- <div class="cours-gbtn">
            <div class="list-box">
            <div class="downbtn">
            <span>异常状态</span>
            <em></em>
            </div>
            <ul class="dropdown-menu">
            <li>测试测试</li>
            <li>我们</li>
            <li>测试测试测试</li>
            <li>asdfasdfsaf	</li>
            </ul>
            </div>
            </div> -->
        </div>
        <div class="xdata-box">
          <h3>课消排行榜</h3>
          <div id="coursConsumption"></div>
        </div>
        <div class="pdata-box clearfix">
          <div id="classRoom"></div>
          <div id="consuType"></div>
          <div id="courseType"></div>
          <div id="coType"></div>
        </div>
      </div>
    </div>
    <script src="../js/echarts.common.min.js"></script>
    <script src="../js/common.js"></script>
    <script>
// 导师课消
var myChart = echarts.init(document.getElementById('coursConsumption'));
option = {
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['2011年', '2012年']
  },
  grid: {
    left: '10%',
    right: '4%',
    top: '1%',
    containLabel: false
  },
  toolbox: {
    show : true,
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type : 'category',
    axisLabel:{
      interval:0,
      rotate:0,
      margin:2,
      textStyle:{
        color:"#222"
      }},
    data: ['导师名字1','导师名字2','导师名字3','导师名字4','导师名字5','导师人名6','导师名字7','导师名字8','导师名字9','导师名字10']
  },
  series: [
  {
    name: '今天',
    type: 'bar',
    data: [18203, 23489, 29034, 104970, 131744, 630230, 430230, 230230, 730230, 530230]
  }
  // ,
  // {
  //     name: '昨天',
  //     type: 'bar',
  //     data: [88203, 33489, 79034, 404970, 331744, 630230, 330230, 630230, 330230, 530230]
  // },
  // {
  //     name: '过去7天',
  //     type: 'bar',
  //     data: [48203, 23489, 89034, 504970, 731744, 430230, 230230, 430230, 230230, 430230]
  // }, 
  // {
  //     name: '过去30天',
  //     type: 'bar',
  //     data: [38203, 43489, 59034, 604970, 431744, 630230, 230230, 730230, 330230, 830230]
  // }

  ]
};

myChart.setOption(option);

//教室使用占比
var myChart1 = echarts.init(document.getElementById('classRoom'));
option1 = {
  color : ['#3cf','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
  title : {
    text: '教室使用占比',
    x:'14%'
  },
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data:['教室1','教室2','教室3','教室4','教室5','教室6']
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data:[
    {value:10, name:'教室1'},
    {value:5, name:'教室2'},
    {value:15, name:'教室3'},
    {value:25, name:'教室4'},
    {value:20, name:'教室5'},
    {value:17, name:'教室6'}
    ]
  }
  ]
};
myChart1.setOption(option1);
// 消费类型比
var myChart2 = echarts.init(document.getElementById('consuType'));
option2 = {
  title : {
    text: '消费类型比',
    x:'14%'
  },
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data:['单次售卖','打包售卖']
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data:[
    {value:10, name:'单次售卖'},
    {value:15, name:'打包售卖'}
    ]
  }
  ]
};
myChart2.setOption(option2);
// 课程类型课消比
var myChart3 = echarts.init(document.getElementById('courseType'));
option3 = {
  title : {
    text: '课程类型课消比',
    x:'14%'
  },
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data:['私教','特色课','常规课']
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data:[
    {value:10, name:'私教'},
    {value:5, name:'特色课'},
    {value:15, name:'常规课'}
    ]
  }
  ]
};
myChart3.setOption(option3);
// 消费方式比
var myChart4 = echarts.init(document.getElementById('coType'));
option4 = {
  title : {
    text: '消费方式比',
    x:'14%'
  },
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data:['次卡','售卖课程','充值','年卡', '月卡']
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data:[
    {value:10, name:'次卡'},
    {value:5, name:'售卖课程'},
    {value:15, name:'充值'},
    {value:25, name:'年卡'},
    {value:9, name:'月卡'}
    ]
  }
  ]
};
myChart4.setOption(option4);
    </script>
  </body>
</html>
